<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>position</title>
  <!-- <link rel="stylesheet" href="position_float.css">   -->
  <link rel="stylesheet" href="position_absolute.css">
</head>

<body>

  <!-- float -->

  <!-- <div id="container">
    <div class="left">float: left;</div>
    <div class="right">float: right;
    <div class="center">
      margin: 0 140px 0 220px;  min-width: 100px;
      <br>
      源码中center块放在float块后面，后面添加clear空块，不然父容器不会自适应高度
    </div>
    <div class = 'clear'></div>
  </div> -->

  <!-- absolute -->
  <!-- 子元素absolute,容器高度无法自适应 -->

  <div id="container">
    <div class="left">  position: absolute;        left: 20px;        top: 20px;</div>
    <div class="center">margin: auto 140px auto 220px;</div>
    <div class="right">position: absolute;        right: 20px;        top: 20px;</div>    
  </div>

</body>

</html>